<template>
	<view class="search">
		<view class="search-header">
			<u-search :show-action="true" :action-text="$t('project.btn_cancel')" height="64" shape="square"  @search="search" @custom="actCancel" :focus="true"></u-search>
		</view>
			<scroll-view class="demand" scroll-y v-if="current == 0" >
             	<view class="demand-content">
             		<view class="demand-item" v-for="(item, index) in demandList"
             			@click="$goPage('/demand/detail', { dkey: item.Dkey })">
             			<view class="demand-item_header u-flex">
             				<text class="demand-item_title u-flex-1">{{ item.NickName }}</text>
             				<text class="demand-item_state">{{ item.StatText == '完工'? '开航':item.StatText}}</text>
             			</view>
             			<view class="demand-item_cnt">{{ item.Content }}</view>
             			<view class="demand-item_time">{{ item.AddTimeText }}</view>
             		</view>
             	</view>
            </scroll-view>
			<scroll-view scroll-y v-if="current == 1" style="height: 100%">
				<view class="repair-item" v-for="(item, index) in repairList"
					@click="$goPage('/staff/bench/detail', { project: item.Pid, discount:item.Discount})">
					<view class="repair-item_cell u-flex">
						<view class="u-flex-1">
							<i class="icon u-m-r-20 u-m-l-10 extend-icon-color" :class="item.isExtend ? 'icon-xiangxia1': 'icon-xiangyou'"
							@click.stop="item.isExtend = !item.isExtend"></i>
			
							<text class="repair-item_cell--label">项目名称：</text>
							<text class="repair-item_cell--value">{{ item.ProjectName }}</text>
						</view>
					</view>
					<view v-show="item.isExtend" class="u-m-l-60 u-m-t-16">
						<view class="repair-item_cell">
							<text class="repair-item_cell--label">顾客公司：</text>
							<text class="repair-item_cell--value">{{item.CorpName != "" ? item.CorpName : "-"}}</text>
						</view>
						<view class="repair-item_cell" >
							<text class="repair-item_cell--label">机务：</text>
							<text class="repair-item_cell--value">{{item.MaintenanceMain != "" ? item.MaintenanceMain : "-" }}</text>
						</view>
						<view class="repair-item_cell">
							<text class="repair-item_cell--label">合同金额：</text>
							<text class="repair-item_cell--value">{{item.Fee != "" ? item.Fee : "-"}}</text>
						</view>
						<view class="repair-item_cell" >
							<text class="repair-item_cell--label">合同工期：</text>
							<text class="repair-item_cell--value">{{item.Period != "" ? item.Period : "-" }}</text>
						</view>
						<view class="repair-item_cell">
							<text class="repair-item_cell--label">预计完工日期：</text>
							<text class="repair-item_cell--value">{{item.PreDoneDate != "" ? item.PreDoneDateText : "-" }}</text>
						</view>
						<view class="repair-item_cell" >
							<text class="repair-item_cell--label">修理船厂：</text>
							<text class="repair-item_cell--value">{{item.ShipYard != "" ? item.ShipYard : "-" }}</text>
						</view>
					</view>
				</view>
				<u-loadmore :status="status" :icon-type="iconType" :load-text="loadText" margin-bottom="45"
					margin-top="45" color="#C1C0C0" />
			</scroll-view>
		<u-modal v-model="deleteShow" :show-cancel-button="true" :show-title="false" :cancelText="$t('project.think')" :confirmText="$t('project.btn_confirm')" :content="$t('project.confirm_del_history')" @confirm="actDelete"></u-modal>
	</view>
</template>

<script>
	import  articleItem from "@/components/article-item/index.vue";
  import pageMixin from '@/utils/pageMixin';
  export default {
    mixins: [pageMixin],
		data() {
			return {
				status: 'nomore',
				iconType: 'flower',
				loadText: {
					loadmore: '轻轻上拉',
					loading: '努力加载中',
					nomore: '到底了哦'
				},
				list:[],
                demandList:[],
                repairList:[],
				
				projectItemList: [],
				isCheck: false,
				isNext: false,
				
				msgList: [],
				
				lang: '',
				
				friendList: [],
				groupList: [],
				
				customStyle:{
					backgroundColor: '#f2f2f2',
					color:'#494949',
					fontSize: '24rpx',
					margin:'6rpx',
				},
				hotList:[
					{name:'修船'},
					{name:'修理船'},
					{name:'船舶翻新'},
					{name:'自动化修理'},
				],
				historyList:[
					{name:'修船'},
					{name:'修理船'},
					{name:'船舶翻新'},
					{name:'自动化修理'},
					{name:'修船'},
					{name:'修理船'},
					{name:'船舶翻新'},
					{name:'自动化修理'},
				],
				keyword:'',
				deleteShow:false,
				current:null,
			}
		},

		onLoad(option) {
			this.current = option.current;
			this.lang = uni.getStorageSync('lang') || '';
			console.log(this.lang);
			uni.setNavigationBarTitle({
				 title:this.$t('home')['search']
			 })
		},
		onShow() {
		},
		components: {
			articleItem
		},
    computed: {
			i18n () {
				return this.$t('project')  
			},
			i18nChat() {
				return this.$t('chat')  
			}
        },
		methods: {
			actCancel() {
				this.$u.route({
					type: 'back'
				})
			},
            search(keyword) {
				//根据传参获取需求或修理
                // this.loadTopic(keyword);
				if (keyword == '' || keyword === undefined){
					uni.showToast({  
						title:'请输入查询条件',  
						icon:'none'
					},2000) 					
				}else{
					if( this.current== 0 ){
						 this.loadDemand(keyword);
					}else if(this.current == 1){
						this.loadRepair(keyword);
					}
				}
               
                
                // this.loadProjectItem(keyword);
                // this.loadMsgList(keyword);
				// this.loadUserFriend(keyword);
				// this.loadGroup(keyword);
            },
            loadTopic(keyword) {
                this.$http.get('/bbs/topic/pager/data', {keyword:keyword}).then(res => {
                    this.list = res;
                })
            },
            loadDemand(keyword) {
				let query = {
					keyword:keyword,
					userType: 2,
				};
                this.$http.get('/staff/biz/demand/listLike', query).then(res => {
                    this.demandList = res;
                })
            },
            loadRepair(keyword) {
                this.$http.get('/mgr/biz/project/pager/dataLike',{keyword:keyword}).then(res => {
                    this.repairList = res;
					this.repairList.forEach(item => {
						this.$set(item, 'isExtend', false)
					})
					console.log(this.repairList)
                })
            },
			loadProjectItem(keyword) {
				let uid = this.vuex_user.uid || 0;
				
				//检查当前顾客是否有登录
				if (uid > 0) {
					let query = {
						keyword:keyword,
					};
					this.$http.get('/client/biz/project/item/pager',query).then(res => {
						this.projectItemList = res;
					})
				} else {
					this.projectItemList = [];
				}
			},
			loadMsgList(keyword) {
				let uid = this.vuex_user.uid || 0;
				
				if (uid > 0) {
					let that = this;
					let query = {
						keyword:keyword,
						uid:uid,
					};
					that.$http.get('/msg/system/list/data', query).then(res => {
						for (let i=0; i<res.length;i++) {
							let bizType = res[i].BizType || 0;
							let content = res[i].Content;
							if (that.$t('chat.msg_title_.'+ bizType)!== undefined) {
								res[i].Title = that.$t('chat.msg_title_.'+ bizType);
							}
							if (that.$t('chat.msg_content_.'+ bizType)!== undefined) {
								let number = res[i].Content.replace(/[^0-9]/ig, "");
								content = that.$t('chat.msg_content_.'+ bizType);
								if (i18n.global.locale == '中文') {
									content = content.replace('[projectName]', res[i].ProjectName)
								} else {
									content = content.replace('[projectName]', res[i].ShipName)
								}
								content = content.replace('[userName]', res[i].ExtDataJson.addAccName || '')
								content = content.replace('[number]', number)
								res[i].Content = content;
							}
						
							//确认结果状态，2：确认、3：驳回
							let stat = res[i].ExtDataJson.stat || 0;
							if (stat == 3) {
								let rejectRmk = res[i].ExtDataJson.rejectRmk || '';
								if (rejectRmk != '') {
									content = content.replace('[rejectRmk]', rejectRmk)
									res[i].Content = content;
								}
							} else if (stat == 2) {
								if (that.$t('chat.msg_content_'+ bizType +'_confirm')!== undefined) {
									let number = res[i].Content.replace(/[^0-9]/ig, "");
									let content = that.$t('chat.msg_content_'+ bizType +'_confirm');
									if (i18n.global.locale == '中文') {
										content = content.replace('[projectName]', res[i].ProjectName)
									} else {
										content = content.replace('[projectName]', res[i].ShipName)
									}
									content = content.replace('[userName]', res[i].ExtDataJson.addAccName || '')
									content = content.replace('[number]', number)
									res[i].Content = content;
								}
							}
						}
						that.msgList = res
					});1
				} else {
					that.msgList = [];
				}
			},
			loadUserFriend(keyword) {
				this.$http.get('/mgr/user/friend/data', {
					keyword: keyword,
				}).then(res => {
					this.friendList = res;
				});
			},
			loadGroup(keyword) {
				this.$http.get('/mgr/user/group/list/data', {
					keyword: keyword,
				}).then(res => {
					if (res !== null) {
						this.groupList = res;
					} else {
						this.groupList = [];
					}
				});
			},
			getItemList(project, prt) {
				this.$http.get('/client/biz/project/item/pager', {
					project: project,
					prt: prt || 0,
					keyword: this.keyword,
				}).then(res => {
					this.projectItemList = res
					this.getMenu(project, prt)
					this.iid = prt
				});
			},
			getMenu(project, prt) {
				this.$http.get('/client/biz/project/item/menu', {
					'project': project,
					'iid': prt
				}).then(res => {
					this.menu = res
				})
			},
			goUser(uid) {
				if (uid > 1) {
					uni.navigateTo({
						url: '/pages/user/index?uid=' + uid
					});
				}
			},
			actDelete(){
				this.historyList = [];
			},
			go2search(e){
				let name = e.target.dataset.name;
				this.keyword = name;
			},
		}
	}
</script>

<style lang="scss" scoped>
	.search {
		white-space: normal;
		word-break: break-all;
	}
	.search-header {
		background-color: #fff;
		padding: 30rpx;
		margin-bottom: 20rpx;
	}
	.search-content {
		overflow: hidden;
	}
	.section{
		background-color: #fff;
		padding: 30rpx;
		&-header{
			margin-bottom: 20rpx;
			font-size: 15px;
			color: #494949;
			font-weight: bold;
		}
	}
    .demand {
        height: 100%;
        box-sizing: border-box;
        padding: 20rpx 30rpx;
        background-color: #ffffff;
        &-item {
            background-color: #f3f3f3;
            padding: 20rpx;
            margin-bottom: 20rpx;
            border-radius: 10rpx;
            color: #444444;
            &_header {
                padding-bottom: 20rpx;
                border-bottom: 1rpx solid rgba(210, 210, 210, 0.5);
                .demand-item_state {
                    color: #131313;
                }
            }
            &_cnt {
                margin: 30rpx 0;
                line-height: 44rpx;
            }
            &_title {
                font-weight: 600;
            }
            &_time {
                text-align: right;
            }
        }
    }
    .demand-content {
        overflow: hidden;
    }
    .repair-content {
        overflow: hidden;
    }
    .repair-item {
        padding: 36rpx;
        background-color: #fff;
        margin-bottom: 20rpx;
        &_cell {
					.extend-icon-color {
						color: #577A9E; 
					}
            & + & {
                margin-top: 24rpx;
            }
            &--label {
                color: #666666;
            }
            &--value {
                color: #000000;
            }
            &--state {
                position: relative;
                right: -30rpx;
                height: 58rpx;
                line-height: 58rpx;
                padding: 0 14rpx;
                font-size: 28rpx;
                color: #5e6d82;
                background-color: #ecf8ff;
                .icon {
                    margin-right: 6rpx;
                }
            }
            &--state:before {
                content: "";
                position: absolute;
                left: -20rpx;
                top: 0;
                width: 0;
                height: 0;
                border-top: 29rpx solid transparent;
                border-bottom: 29rpx solid transparent;
                border-right: 29rpx solid #ecf8ff;
            }
        }
    }
	
	.detail-repair_content {
		overflow: hidden;
		// padding-bottom: 100rpx;
	
		.check-footer {
			z-index: 999;
			position: fixed;
			width: 100%;
			bottom: 0;
			text-align: center;
			background-color: #FFFFFF;
	
			.u-btn {
				display: inline-block;
				margin: 20rpx;
			}
		}
	}
	.detail-repair_item {
		position: relative;
		width: 100%;
		padding: 30rpx 34rpx;
		background-color: #fff;
		margin-bottom: 20rpx;
	
		&--name {
			color: #000000;
			font-weight: 500;
			margin-bottom: 24rpx;
		}
	
		&--checkbox {
			margin: 0 9rpx 9rpx 0;
		}
	
		&--order {
			display: inline-block;
			min-width: 36rpx;
			height: 36rpx;
			line-height: 36rpx;
			margin-bottom: 8rpx;
			padding: 0 6rpx;
			color: #909399;
			font-size: 24rpx;
			text-align: center;
	
			&::after {
				border-radius: 12rpx;
			}
		}
	
		&--order_blue {
			width: 36rpx;
			height: 36rpx;
			line-height: 36rpx;
			margin-right: 12rpx;
			color: #409EFF;
			font-size: 24rpx;
			text-align: center;
			background-color: #ECF5FF;
	
			&::after {
				border-radius: 12rpx;
				border-color: #B3D8FF;
			}
		}
	
		&--info {
			clear: both;
			overflow: hidden;
		}
	
		&--price {
			color: #555555;
		}
	
		&--number {
			color: #C50909;
		}
	
		&--child {
			float: left;
			width: 50%;
			margin-bottom: 10rpx;
			color: #666666;
	
			&__value {
				color: #000;
				margin-right: 6rpx;
	
				.color-gray {
					color: #909399;
				}
			}
	
			&__icon {
				color: #0089FF;
			}
		}
	
		.child-btn {
			width: inherit;
			float: right;
			display: inline-block;
			padding: 6rpx 12rpx;
			color: #666666;
			background-color: #FFFFFF;
			border-radius: 6rpx;
			border: 1rpx solid #ddd;
	
			&_count {
				color: #131313;
				margin-left: 10rpx;
			}
		}
	
		&--child:nth-child(2n) {
			text-align: right;
		}
	
		&--child.textarea {
			width: 100%;
		}
	
		&--value {
			color: #000;
		}
	
		.checkbox-box {
			margin: 0 30rpx 0 -10rpx;
		}
	
		.u-checkbox {
			width: 40rpx ;
		}
	
		.tag {
			margin-left: 8rpx;
			padding: 2rpx 8rpx;
			font-size: 24rpx;
			color: #FFFFFF;
			background-color: #c9d8e8;
			border-radius: 4rpx;
		}
	}
	
	.msg{
		position: relative;
		padding:5rpx 0rpx;
		&-item {
			background-color: #fff;
			padding: 20rpx;
			margin-bottom: 20rpx;
			border-radius: 10rpx;
			&_header{
				font-size: 30rpx;
				color: #131313;
				padding-bottom: 20rpx;
				border-bottom: 1rpx solid rgba(210, 210, 210, .5);
				.note-state{
					position: relative;
					margin-right: 15rpx;
					color: #7F7F7F;
				}
			}
			&_title{
				margin-right: 6rpx;
			}
			&_txt {
				margin: 34rpx 0;
				font-size: 28rpx;
				color: #666666;
				line-height: 44rpx;
			}
			&_time {
				text-align: right;
				font-size: 26rpx;
				color: #666666;
				margin-bottom: 10rpx;
			}
		}
		.msg-item.read{
			opacity: .5;
			.u-badge{
				display: none;
			}
		}
		.more-action{
			z-index: 9999;
			position: fixed;
			right: 20rpx;
			top: 16rpx;
			padding:20rpx 30rpx;
			background: #313131;
			border-radius: 10rpx;
			&_item{
				font-size: 30rpx;
				color: #FFFFFF;
				line-height: 2;
			}
			&::after{
				position: absolute;
				top: -15rpx;
				right: 24rpx;
				content: '';
				width: 0;
				height: 0;
				border-left: 12rpx solid transparent;
				border-right: 12rpx solid transparent;
				border-bottom: 16rpx solid #313131;
			}
		}
	}
	
	.note-header {
		width: 100%;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 99;
		padding-top: var(--status-bar-height);
		background-color: #EFEFEF;
	}
	
	.note-header_tabs {
		width: 400rpx;
		padding: 30rpx 0;
		margin: 0 auto;
	}
	
	.note-add_btn {
		position: absolute;
		right: 30rpx;
	}
	
	.note-section {
		margin-bottom: 24rpx;
	}
	
	.note-item {
		background-color: #fff;
		height: 106rpx;
		padding: 0 24rpx 0 18rpx;
	
		&_avatar {
			position: relative;
			margin-right: 24rpx;
		}
	
		&_content {
			height: 100%;
			display: flex;
			justify-content: center;
			flex-direction: column;
	
			&--name {
				font-size: 32rpx;
			}
	
			&--text {
				font-size: 24rpx;
				color: #949C9E;
			}
		}
	
		&_time {
			font-size: 24rpx;
			height: 76rpx;
			color: #949C9E;
		}
	}
	.note {
		padding-bottom: 148rpx;
	}
	.note-section {
		margin-bottom: 24rpx;
	}
	.note-item {
		background-color: #fff;
		height: 106rpx;
		padding: 0 24rpx 0 18rpx;
		&_avatar {
			position: relative;
			margin-right: 24rpx;
		}
		&_content {
			height: 100%;
			display: flex;
			justify-content: center;
			flex-direction: column;
			&--name {
				font-size: 32rpx;
			}
			&--text {
				font-size: 24rpx;
				color: #949C9E;
			}
		}
		&_time {
			font-size: 24rpx;
			height: 76rpx;
			color: #949C9E;
		}
	}
	
</style>
